<template>
  <div v-if="userStore.isLoggedIn" class="layout">
    <el-menu
      class="layout-menu"
      :default-openeds="defaultOpenIndex"
      :default-active="route.path"
      @select="onMenuSelect"
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      style="background-color: #8c969b57"
      router
    >
      <template v-for="(menu, i) in menuList" :key="i">
        <el-sub-menu v-if="menu.children" :index="`${i}_sub`">
          <template #title>
            <el-icon><component :is="menu.icon" /></el-icon>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item v-for="(child, j) in menu.children" :key="j + '_child'" :index="child.path || ''">
            {{ child.label }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="menu.path || ''">
          <el-icon><component :is="menu.icon" /></el-icon>
          <span>{{ menu.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="layout-body">
      <el-dropdown v-if="userStore.isLoggedIn" class="manage-dropdown" trigger="click">
        <div class="avatar-container" style="cursor: pointer">
          <img :src="getBookImageUrl(userStore.userInfo.avatar)" class="layout-avatar" />
          管理
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleSignOut">退出登录</el-dropdown-item>
            <el-dropdown-item @click="$router.push({ name: 'person' })">用户信息</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <router-view />
    </div>
  </div>
  <div v-else>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RouterView, useRoute } from 'vue-router';
import router from './router';
import { useUserStore } from './stores/user';
import { getBookImageUrl } from '@/utils';
const route = useRoute();
const currentPath = ref(route.path);
const userStore = useUserStore();

const handleSignOut = () => {
  userStore.logout();
  router.push({ name: 'login' });
};

interface MenuItem {
  label: string;
  path?: string;
  icon?: string;
  children?: MenuItem[];
}
const menuList: MenuItem[] = [
  { path: '/', label: '首页', icon: 'house' },
  {
    label: '书籍管理',
    icon: 'notebook',
    children: [{ path: '/book', label: '全部书籍' }],
  },
  {
    label: '用户管理',
    icon: 'user',
    children: [{ path: '/user', label: '用户' }],
  },
  {
    label: '订单数据',
    icon: 'list',
    children: [{ path: '/order', label: '订单' }],
  },
  {
    label: '评论数据',
    icon: 'comment',
    children: [{ path: '/comment', label: '评论' }],
  },
  {
    label: '个人中心',
    icon: 'user',
    children: [{ path: '/person', label: '用户信息' }],
  },
];

const defaultOpenIndex = [menuList.findIndex((item) => item.path === route.path) + '_sub'];

const onMenuSelect = (path: string) => {
  currentPath.value = path;
};

onMounted(() => {
  userStore.updateUserInfo();
});
</script>

<style lang="less">
.el-menu {
  background-color: #8c969b57;
  border-right: 1px solid var(--el-menu-border-color);
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding-left: 0;
  position: relative;
}

.el-dropdown.manage-dropdown {
  position: absolute;
  z-index: 100;
  right: 16px;
  top: 15px;
}
.layout {
  display: flex;
  width: 100%;
  height: 100%;
}

.layout-menu {
  height: 100%;
  overflow-y: auto;
}

.layout-body {
  width: 0;
  flex-grow: 1;
  height: 100%;
  position: relative;
  overflow: auto;
}
.layout-avatar {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position: center;
  background-size: cover;
  border-radius: 25px;
  background-repeat: no-repeat;
}
</style>
